<template>
  <div class="swipreBox">
    <van-swipe class="my-swipe" :autoplay="3000000" indicator-color="white" :show-indicators="false">
      <van-swipe-item v-for="(dt,index) in detail.videoFileUrls" :key="dt">
        <my-video-play :id="`videoWrap${index}`" :poster='detail.imageUrl' :src='dt' ref="player" @playStatus='getPlayStatus'/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { Swipe as vanSwipe, SwipeItem as vanSwipeItem } from 'vant';
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import myVideoPlay from "@/components/myVideoPlay.vue";
export default {
    props: {
    
    },
    components: {
        vanSwipe,
        vanSwipeItem,
        Image,
        myVideoPlay
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const state = reactive({
            detail:computed(()=>store.state.shop.detail),
        })

        const getPlayStatus = (flag)=>{
            context.emit('playStatus',flag)
        }
        return {
            ...toRefs(state),
            getPlayStatus
        }
    }
};
</script>
<style lang="scss">
.swipreBox {
  width: 100%;
  height: 100%;
  .van-swipe {
    height: 100%;
    img{
      width: 100%;
    }
  }
}
</style>